<template>
  <div class="tab-class">
    <van-tabbar
      v-model="active"
      active-color="#7E82F6"
      @change="handleTab">
      <van-tabbar-item icon="iconshouyex">
        <span>首页</span>
        <i
          slot="icon"
          slot-scope="props"
          class="iconfont"
          :class="props.active ? 'iconshouyex' : 'iconshouyeweixuanzhongx'"
        ></i>
      </van-tabbar-item>
      <van-tabbar-item icon="search" dot>
        <span>推荐</span>
        <i
          slot="icon"
          slot-scope="props"
          class="iconfont"
          :class="props.active ? 'icontuijianx' : 'icontuijianweixuanzhongx'"
        ></i>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" info="5">
        <span>购物车</span>
        <i
          slot="icon"
          slot-scope="props"
          class="iconfont"
          :class="props.active ? 'icongouwuchex' : 'icongouwucheweixuanzhongx'"
        ></i>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" info="20">
        <span>客服</span>
        <i
          slot="icon"
          slot-scope="props"
          class="iconfont"
          :class="props.active ? 'iconkefux' : 'iconkefuweixuanzhongx'"
        ></i>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o">
        <span>我的</span>
        <i
          slot="icon"
          slot-scope="props"
          class="iconfont"
          :class="props.active ? 'iconwodex' : 'iconwodeweixuanzhongx'"
        ></i>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data(){
      return {
        active:this.activeNum,
      }
    },
    props:['activeNum'],
    methods:{
      handleTab(val){
        localStorage.setItem('indexActive',val)
        this.$emit('tabberSelected',val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab-class{
    z-index:100;

     /deep/ .van-tabbar-item{
      color: #7E82F6;

       /deep/ van-info {
        right: 2px;
        top: -4px;
      }

       /deep/ .van-tabbar-item__icon--dot::after{
        right: -4px;
        width: 10px;
        height: 10px;
      }

       /deep/ .van-tabbar-item__icon{
        margin-bottom:0 !important;

        i{
          font-size: 26px;
        }
      }

       /deep/ .van-tabbar-item__text{
        span{
          font-size: 10px;
          color: #A6A7C6;
        }
      }
    }

    /deep/ .van-tabbar-item--active{
      /deep/ .van-tabbar-item__text{
        span{
          color: #7E82F6;
        }
      }
    }

  }
</style>
